<script lang="ts">
export default {
  name: "UserPage",
};
</script>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import portService from "@/portService";

const searchForm = ref({
  page: 1,
  size: 20,
  name: "",
  total: 0,
});

const loading = ref(false);
const tableData = ref([]);
const getList = async () => {
  try {
    loading.value = true;
    const params = {
      page: searchForm.value.page,
      size: searchForm.value.size,
      name: searchForm.value.name,
    };
    const {
      data: { list = [], total = 0 },
    } = await portService.userListApi(params);
    tableData.value = list || [];
    searchForm.value.total = total;
  } finally {
    loading.value = false;
  }
};

const handleSearch = () => {
  getList();
};

const form = ref();
const handleReset = async () => {
  await form.value.validate();
  searchForm.value.page = 1;
  searchForm.value.size = 10;
  searchForm.value.name = "";
  getList();
};

const onChange = () => {
  getList();
};

onMounted(() => {
  getList();
});
</script>

<template>
  <div class="user-page h-full flex flex-col">
    <div class="search-wrap mb-10">
      <el-form :model="searchForm" label-width="0" ref="form">
        <el-row>
          <el-col :span="8">
            <xt-input v-model="searchForm.name" placeholder="请输入用户名称" />
          </el-col>

          <el-col :span="16">
            <div class="btn-wrap text-right">
              <xt-button type="primary" link @click="handleSearch">查 询</xt-button>
              <xt-button link @click="handleReset">重 置</xt-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="table-wrap flex-1 h-0 overflow-hidden">
      <el-table :data="tableData" height="100%" border stripe v-loading="loading">
        <el-table-column type="index" label="序号" width="80" align="center" />
        <el-table-column prop="account" label="账号" width="180" align="center" />
        <el-table-column prop="name" label="名称" width="180" align="center" />
        <el-table-column prop="roleId" label="角色" align="center" />
        <el-table-column prop="gender" label="性别" align="center" />
        <el-table-column prop="createdTime" label="创建时间" align="center" />
      </el-table>
    </div>
    <div class="pagination-wrap h-32 mt-10">
      <el-pagination
        class="float-right hidden"
        v-model:current-page="searchForm.page"
        v-model:page-size="searchForm.size"
        :page-sizes="[10, 20, 50, 100]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="searchForm.total"
        @size-change="onChange"
        @current-change="onChange"
      />
    </div>
  </div>
</template>
